window.addEventListener("load", function () {
  console.log(222);
  // 0. 获取元素
  var focus = this.document.querySelector(".focus");
  // 轮播图图片
  var ul = focus.children[0];
  // 小圆点样式
  var ol = focus.children[1];
  // 轮播图的宽度
  var w = focus.offsetWidth;
  // 1. 轮播图滚动

  // 轮播图计数器
  var index = 0;
  var timer = setInterval(function () {
    index++;
    var translatex = -index * w;
    // 移动的过渡效果
    ul.style.transition = "all 0.9s";
    // 移动元素
    ul.style.transform = "translateX(" + translatex + "px)";
  }, 1000);
  // 2. 监听  transform 移动完成
  // transitionend:当前页面不在当前窗口显示，则这个函数不执行
  ul.addEventListener("transitionend", function () {
    console.log(index);
    if (index >= 3) {
      index = 0;
      var translatex = -index * w;
      // 消除动画效果
      ul.style.transition = "none";
      // 移动元素
      ul.style.transform = "translateX(" + translatex + "px)";
    }
    // else if (index < 0) {
    //   index = 2;
    //   var translatex = -index * w;
    //   // 消除动画效果
    //   ul.style.transition = "none";
    //   // 移动元素
    //   ul.style.transform = "translateX(" + translatex + "px)";
    // }
    // 3. 小圆圈跟随变化
    // 把ul 中，带有 current 类名的li 的类名 current 删除
    ol.querySelector(".current").classList.remove("current");
    // 当前索引号的 li，添加 current 类
    ol.children[index].classList.add("current");
  });
  // 4. 拖动
  var mouseX = 0; // 鼠标的起始坐标
  var moveX = 0; // 鼠标移动的距离
  ul.addEventListener("touchstart", function (e) {
    // 停止定时器
    clearInterval(timer);
    mouseX = e.targetTouches[0].pageX;
  });
  ul.addEventListener("touchmove", function (e) {
    var x = e.targetTouches[0].pageX;
    moveX = x - mouseX;
    var translatex = -index * w + moveX;
    // 消除动画效果
    ul.style.transition = "none";
    // 移动元素
    ul.style.transform = "translateX(" + translatex + "px)";
    e.preventDefault(); // 阻止滚动屏幕的行为
  });
  // 5. 播放下一张
  ul.addEventListener("touchend", function (e) {
    console.log(123);
    if (Math.abs(moveX) > 50) {
      if (moveX > 0) {
        index--;
      } else {
        index++;
      }
      var translatex = -index * w;
      // 移动的过渡效果
      ul.style.transition = "all 0.9s";
      // 移动元素
      ul.style.transform = "translateX(" + translatex + "px)";
    } else {
      // 6. 回弹
      var translatex = -index * w;
      // 移动元素
      ul.style.transform = "translateX(" + translatex + "px)";
    }
    // 7. 开启定时器
    clearInterval(timer);
    timer = setInterval(function () {
      index++;
      var translatex = -index * w;
      // 移动的过渡效果
      ul.style.transition = "all 0.9s";
      // 移动元素
      ul.style.transform = "translateX(" + translatex + "px)";
    }, 1000);
  });

  // 8. 返回顶部
  var goBack = this.document.querySelector(".goBack");
  var nav = this.document.querySelector("nav");
  // 窗口滚动事件
  window.addEventListener("scroll", function () {
    var y = window.pageYOffset; // 窗口滚动的距离
    if (y > nav.offsetTop) {
      goBack.style.display = "block";
    } else {
      goBack.style.display = "none";
    }
  });
  // 点击返回顶部
  goBack.addEventListener("click", () => {
    window.scroll(0, 0);
  });
});
